<template>
	<el-tree v-bind="$attrs">
		<template #default="{ node }">
			<div class="tree-icon"></div>
			<element-tree-line :node="node" :showLabelLine="false" :indent="16"></element-tree-line>
		</template>
	</el-tree>
</template>
<script setup lang="ts">
import 'element-tree-line/dist/style.css';
import { getElementLabelLine } from 'element-tree-line';

const ElementTreeLine = getElementLabelLine(h);
</script>
<style scoped lang="scss">
::v-deep(.tree-icon){
	flex: 0 0 auto;
}
::v-deep(.element-tree-node-label) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

::v-deep(.el-tree-node__content){
  height: 30px;
}

.el-icon.el-tree-node__expand-icon ~ .tree-icon {
	@extend .tree-folder;
}

.el-icon.el-tree-node__expand-icon.expanded ~ .tree-icon {
	@extend .tree-folder-open;
}

.el-icon.el-tree-node__expand-icon.is-leaf ~ .tree-icon {
	@extend .tree-file;
}

.tree-folder {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 4px 4px 2px 0;
	vertical-align: middle;
	overflow: hidden;
}

.tree-folder {
	background: url('./assets/folder-close.png') no-repeat;
	background-size: 100% auto;
}

.tree-folder-open {
	background: url('./assets/folder-open.png') no-repeat;
	background-size: 90% auto;
}

.tree-file {
	background: url('./assets/file.png') no-repeat;
	background-size: 90% auto;
}

::v-deep(.element-tree-node-label) {
	font-size: 14px !important;
}
</style>
